<template>
  <div class="item" style="height: 100% ; width: 100%">
    <div id="Gauge" :style="{ width: '100%', height: '100%' }"></div>
  </div>
</template>

<script>
import request from "@/util/request.js";
import * as echarts from "echarts";

export default {
  name: "Gauge",
  data() {
    return {
      chartInstance: null,
      echart: echarts,
      option: {},
      resizeTimer: null // 定时器
    };
  },
  mounted() {
    this.initChart();
    this.getData();
    window.addEventListener("resize", this.handleResizeEnd);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResizeEnd);
  },
  watch: {
    data() {
      this.getData();
    }
  },
  methods: {
    initChart() {
      this.chartInstance = this.echart.init(document.getElementById("Gauge"));
    },
    async getData() {
      await this.updateData();
    },
    updateData() {
      this.option = {
        title: {
          text: '及格率',
          left: 'center',
          textStyle: {
            fontSize: 16 // 调整标题字体大小
          }
        },
        series: [
          {
            type: 'gauge',
            progress: {
              show: true,
              width: 18
            },
            axisLine: {
              lineStyle: {
                width: 18
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              length: 15,
              lineStyle: {
                width: 2,
                color: '#999'
              }
            },
            axisLabel: {
              distance: 25,
              color: '#999',
              fontSize: 20 // 调整轴标签字体大小
            },
            anchor: {
              show: true,
              showAbove: true,
              size: 25,
              itemStyle: {
                borderWidth: 10
              }
            },
            title: {
              show: false
            },
            detail: {
              valueAnimation: true,
              fontSize: 40, // 调整详情字体大小
              offsetCenter: [0, '70%']
            },
            data: [
              {
                value: 90.2
              }
            ]
          }
        ]
      };
      this.chartInstance.setOption(this.option, true);
    },
    handleResizeEnd() {
      clearTimeout(this.resizeTimer);
      this.resizeTimer = setTimeout(() => {
        this.chartInstance.resize();
        this.updateFontSize(); // 调整文字大小等
      }, 100); // 设置延迟时间，500ms
    },
    updateFontSize() {
      // 根据图表宽度调整文字大小等
      const width = this.chartInstance.getWidth();
      // 这里根据需要进行文字大小的调整
    }
  }
};
</script>

<style scoped>
</style>
